<template>
  <SidebarLayout title="开发工具" logo-to="/apps">
    <template #sidebar>
      <!-- 工具菜单 -->
      <div class="tools-menu">
        <h4 class="section-title">工具列表</h4>
        <el-menu
          :default-active="activeMenuId"
          class="tools-menu-list"
          @select="handleMenuSelect"
          router
        >
          <el-menu-item index="/dev-tools/json">
            <el-icon><Document /></el-icon>
            <span>JSON工具</span>
          </el-menu-item>
          <el-menu-item index="/dev-tools/time">
            <el-icon><Clock /></el-icon>
            <span>时间工具</span>
          </el-menu-item>
        </el-menu>
      </div>
    </template>

    <template #content>
      <router-view />
    </template>
  </SidebarLayout>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { Document, Clock } from '@element-plus/icons-vue'
import SidebarLayout from '@/components/SidebarMenu.vue'

const route = useRoute()
const activeMenuId = ref('')

// 监听路由变化，更新当前激活的菜单
watch(
  () => route.path,
  (path) => {
    activeMenuId.value = path
  },
  { immediate: true }
)

const handleMenuSelect = (index: string) => {
  activeMenuId.value = index
}
</script>

<style scoped>
.section-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--el-text-color-regular);
  margin: 0 0 12px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--el-border-color-lighter);
}

.tools-menu {
  padding: 20px;
}

.tools-menu-list {
  border: none;
  background: transparent;
}

.tools-menu-list .el-menu-item {
  height: 48px;
  line-height: 48px;
  border-radius: 6px;
  margin-bottom: 4px;
  transition: all 0.3s ease;
}

.tools-menu-list .el-menu-item:hover {
  background-color: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}

.tools-menu-list .el-menu-item.is-active {
  background-color: var(--el-color-primary);
  color: white;
}

.tools-menu-list .el-menu-item .el-icon {
  margin-right: 8px;
}
</style>